<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>粉丝统计</span>
    </div>
    <!--<el-row type="flex" justify="center">-->
    <!--<el-col :lg="16" :md="20" :sm="24">-->
    <el-form>
      <el-form-item size="mini" label="公众号：">

        <el-select v-model="value" :default-first-option="true" filterable label="选择" placeholder="请选择">
          <el-option
            v-for="(item,index) in tencent"
            :key="index"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
    </el-form>

    <el-card >
      <div slot="header">
        <span>今日关键指标</span>
      </div>
      <el-table
        :table-title="tableTitle"
        :data="todayData"
      >
        <el-table-column
          v-for="col in tableTitle"
          :key="col.en"
          :prop="col.en"
          :label="col.cn"
          align="center"
        />
      </el-table>
    </el-card>
    <el-card class="mt15">
      <div slot="header">
        <span>昨日关键指标</span>
      </div>
      <el-table
        :table-title="tableTitle"
        :data="yesterdayData"
      >
        <el-table-column
          v-for="col in tableTitle"
          :key="col.en"
          :prop="col.en"
          :label="col.cn"
          align="center"
        />
      </el-table>
    </el-card>
    <el-card class="mt15">
      <div slot="header">
        <span style="margin-right:15px">七日粉丝数据指标</span>
        <el-button size="mini">本周变化</el-button>
        <el-button size="mini">两月变化</el-button>
        <el-button size="mini">半年变化</el-button>
      </div>
      <barChart :options="option"/>
    </el-card>
    <!--</el-col>-->
    <!--</el-row>-->

  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import barChart from '@/views/components/chart'

export default {
  name: 'Home',
  components: { UploadExcelComponent, barChart },
  data() {
    return {
      value: '',
      filter_info: {},
      tencent: [
        {
          label: '公众号A',
          value: '1'
        },
        {
          label: '公众号B',
          value: '2'
        },
        {
          label: '公众号C',
          value: '3'
        }
      ],
      tableTitle: [
        {
          cn: '新关注',
          en: 'id'
        },
        {
          cn: '取消关注',
          en: 'time'
        },
        {
          cn: '净增关注',
          en: 'name'
        },
        {
          cn: '累积关注',
          en: 'bank'
        }
      ],
      todayData: [
        {
          id: 1,
          time: '2',
          name: '3',
          bank: '4'
        }
      ],
      yesterdayData: [
        {
          id: 2,
          time: '3',
          name: '4',
          bank: '5'
        }
      ],
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新关注人数', '取消关注人数', '净增人数']
        },
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 610]
          },
          {
            name: '联盟广告',
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
    }
  },
  mounted() {
    this.getTencentList()
  },
  methods: {

    getTableList(data) {
      const loading = this.$loading()
        loading.close()
      this.$post('action/Contacts/dataGrid', data)
        .then(res => {
          const list = res.list.map((item, index) => {
            return item
          })
          this.pageInfo.totalPage = res.totalPage
          this.pageInfo.totalRow = res.totalRow

          this.tableData = list || {}
          loading.close()
        })
        .catch(_=>{
          loading.close()
        })
    },
    // 获取公众号列表
    getTencentList() {
      this.$get('action/WechatNumber/tree')
        .then(res => {
          const list = []
          if (res.data.WechatTree) {
            res.data.WechatTree.forEach(item => {
              list.push({
                label: item.name,
                value: item.id
              })
            })
          }
          this.tencent = list
        })
    },

    // 搜索
    search() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (origin[key] && key !== 'created_at') {
          data[key] = origin[key]
        } else if (key === 'created_at') {
          data.startDate = origin[key][0]
          data.endDate = origin[key][1]
        }
      }

      this.onFilter = true
      this.filter_info = data
      this.getTableList()
    },
    reset() {
      this.filter_info = {}
      this.onFilter = false
      this.getTableList()
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
    .table-menu {
        padding-bottom: 15px;
    }

</style>
